<template>
    <div>
        <el-table :rowKey="rowKey" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :data="tableData" style="width: 100%" :border="border" :header-cell-style=cellStyle>
            <template v-for="(item, index) in columns" :key="index">
            <el-table-column
                v-if="item.type === 'index' || item.type === 'selection' || item.type === 'expand'"
                    :index="indexMethod" v-bind="item">
                    <!-- 当type等于expand时， 配置通过h函数渲染、txs语法或者插槽自定义内容 -->
                    <template #default="{ row, $index }">
                    <!-- render函数 (START) : 使用内置的component组件可以支持h函数渲染和txs语法 -->
                    <component v-if="item.render" :is="item.render" :row="row" :index="$index" />
                    <!-- render函数 (END) -->
                    <!-- 自定义slot (START) -->
                    <slot v-else-if="item.slot" name="expand" :row="row" :index="$index"></slot>
                    <!-- 自定义slot (END) -->
                </template>
            </el-table-column>
            <el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width">
                <template v-slot="scope" v-if="item.slot">
                    <slot :name="item.slot" :row="scope.row" />
                </template>
            </el-table-column>
            </template>
        </el-table>
        <div class="comFlex flexJustEnd comWidth100">
            <el-pagination
                v-if="isShowPage"
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="pageSizes"
                :layout="layout"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleSizeChange"
            />
        </div>
         
    </div>
    <!-- layout="total, sizes, prev, pager, next, jumper" -->

</template>
<script setup>
import { ref ,defineProps, computed} from 'vue';
const props = defineProps({
    tableData :{
        type : Array,
        default : []
    },
    columns :{ 
        type : Array,
        default : []
    },
    border :{
        type : Boolean,
        default : true
    },
    isShowPage:{
        type : Boolean,
        default : true
    },
    rowKey :{
        type : String,
        default : 'id'
    },
    page: { type: Number, default: 1 },
    size: { type: Number, default: 10 },
    total: { type: Number, default: 0 },
    layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' },
    pageSizes: {
        type: Array,
        default: () => [10, 20, 30, 50, 100]
  }
})
const cellStyle = {
    background : '#F2F2F2'
}

const emit = defineEmits(['update:size', 'update:page', 'handleSizeChange'])

const pageSize = computed({
  get: () => props.size,
  set: (val) => {
    emit('update:size', val)
  }
})
const currentPage = computed({
  get: () => props.page,
  set: (val) => {
    emit('update:page', val)
  }
})

function handleSizeChange() {
  emit('handleSizeChange')
}
</script>